<script setup>
import { h, ref, reactive, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 数据定义
const dialogVisible = ref(false);
const isView = ref(false);
const dialogTitle = ref("");

const roomTypes = [
  { value: "one", label: "一居室" },
  { value: "two", label: "两居室" },
  { value: "three", label: "三居室" },
];

const cameraOptions = Array.from({ length: 20 }, (_, i) => ({
  value: `CAM${4000 + i}`,
  label: `摄像头${4000 + i}`,
}));

const searchForm = reactive({
  roomId: "",
  roomType: "",
  managementUnit: "",
});

const formData = reactive({
  roomId: "",
  roomType: "one",
  area: 50,
  maxResidents: 2,
  managementUnit: "",
  accessControlId: "",
  accessControlStatus: "normal",
  relatedCameras: [],
});
// 显示弹窗
const showDialog = (title, row, isViews) => {
  dialogTitle.value = title;
  isView.value = isViews;
  if (row) {
    Object.assign(formData, JSON.parse(JSON.stringify(row)));
  } else {
    Object.assign(formData, {
      roomId: `R${Math.floor(Math.random() * 9000 + 1000)}`,
      roomType: "one",
      area: 50,
      maxResidents: 2,
      managementUnit: "",
      accessControlId: `AC${Math.floor(Math.random() * 9000 + 1000)}`,
      accessControlStatus: "normal",
      relatedCameras: [],
    });
  }
  dialogVisible.value = true;
};
// 提交
const submitForm = () => {
  ElMessage.success(dialogTitle.value + "成功");
  dialogVisible.value = false;
  fetchData();
};

// 使用 defineExpose 暴露方法
defineExpose({
  showDialog,
});
</script>

<template>
  <!-- 新增/编辑对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
    <el-form :model="formData" label-width="120px" :disabled="isView">
      <el-form-item label="房间ID" prop="roomId">
        <el-input v-model="formData.roomId" />
      </el-form-item>
      <el-form-item label="房间类型" prop="roomType">
        <el-select v-model="formData.roomType">
          <el-option
            v-for="item in roomTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="面积(㎡)" prop="area">
        <el-input-number v-model="formData.area" :min="10" :max="500" />
      </el-form-item>
      <el-form-item label="准住人数" prop="maxResidents">
        <el-input-number v-model="formData.maxResidents" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="管理单位" prop="managementUnit">
        <el-input v-model="formData.managementUnit" />
      </el-form-item>
      <el-form-item label="门禁编号" prop="accessControlId">
        <el-input v-model="formData.accessControlId" />
      </el-form-item>
      <el-form-item label="门禁状态" prop="accessControlStatus">
        <el-radio-group v-model="formData.accessControlStatus">
          <el-radio label="normal">正常</el-radio>
          <el-radio label="fault">故障</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联监控" prop="relatedCameras">
        <el-select v-model="formData.relatedCameras" multiple>
          <el-option
            v-for="item in cameraOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false" class="el-button--default"
        >取消</el-button
      >
      <el-button type="primary" @click="submitForm" v-if="!isView"
        >提交</el-button
      >
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
</style>

